<template>
    <el-dialog v-model="compReportVisible" title="发票详情"  @opened="opened"  width="900"  @close="closeTxDialog" >
        <div class="page-container" v-loading="pageLoading">
        <el-card >
            <template #header>
            <div class="card-header">
                <span>{{taskItem.no}}发票详情</span>
            </div>
            </template>
            <el-descriptions>
                <el-descriptions-item label="创建时间：">{{data?.createTime}}</el-descriptions-item>
                <el-descriptions-item label="服务商名称：">{{data?.sydName}}</el-descriptions-item>
                <el-descriptions-item label="服务商编号：">{{data?.sydNo}}</el-descriptions-item>
                <el-descriptions-item label="企业名称：">{{data?.merName}}</el-descriptions-item>
                <el-descriptions-item label="企业编号：">{{data?.merNo}}</el-descriptions-item>
                <el-descriptions-item label="企业电话：">{{data?.dwdh}}</el-descriptions-item>
                <el-descriptions-item label="纳税人识别号：" >{{data?.creditCode}}</el-descriptions-item>
                <el-descriptions-item label="发票抬头：">{{data?.header}}</el-descriptions-item>
                <el-descriptions-item label="开票银行：">{{data?.bankAddress}}</el-descriptions-item>
                <el-descriptions-item label="开票银行账号：">{{data?.bankCard}}</el-descriptions-item>
                <el-descriptions-item label="开票项目：">{{data?.category}}</el-descriptions-item>
                <el-descriptions-item label="发票数量：">{{data?.inv_num || data?.details?.length}}</el-descriptions-item>
                <el-descriptions-item label="开票金额：">{{proxy?.convertFenToYuan(data?.invAmount)}}</el-descriptions-item>
                <el-descriptions-item label="备注：">{{data?.remark}}</el-descriptions-item>
                <el-descriptions-item label="开票状态：">{{proxy?.getDicValue(data?.status,invoice_status)}}</el-descriptions-item>
                <el-descriptions-item label="企业注册地址：" >{{data?.dwzcdz}}</el-descriptions-item>
            </el-descriptions>
        </el-card>

        <el-card style="margin-top: 5px;">
            <template #header>
            <div class="card-header">
                <span>快递详情</span>
            </div>
            </template>
            <el-descriptions>
                <el-descriptions-item label="收件人：">{{data?.addName}}</el-descriptions-item>
                <el-descriptions-item label="收件人电话：">{{data?.addPhone}}</el-descriptions-item>
                <el-descriptions-item label="收件地址：">{{data?.addAddress}}</el-descriptions-item>
                <el-descriptions-item label="快递时间：">{{data?.iogisticsTime}}</el-descriptions-item>
                <el-descriptions-item label="快递公司：">{{data?.iogisticsCompany}}</el-descriptions-item>
                <el-descriptions-item label="快递编号：">{{data?.iogisticsNo}}</el-descriptions-item>
                <el-descriptions-item label="快递状态：">{{proxy?.getDicValue(data?.iogisticsStatus,iogistics_status)}}</el-descriptions-item>

            </el-descriptions>
        </el-card>

        <el-card style="margin-top: 10px;">
            <template #header>
            <div class="card-header">
                <span>发票列表</span>
            </div>
            </template>
            <el-table :data="data?.details" border>
                <el-table-column prop="addTime" label="创建时间"></el-table-column>
                <el-table-column prop="detailNo" label="发票编号" />
                <el-table-column prop="invAmount" label="发票金额(元)">
                    <template #default="scope">
                    {{proxy?.convertFenToYuan(scope.row.invAmount)}}
                    </template>
                </el-table-column>
                <el-table-column prop="category" label="服务项目"></el-table-column>
                <el-table-column prop="inv_pic" label="发票样张">
                    <template #default="scope">
                        <ImagePreview
                          :width="50"
                          :height="50"
                          :src="scope.row.inv_pic"
                          :preview-src-list="[scope.row.inv_pic]"
                        />
                      </template>
                </el-table-column>
            </el-table>
            <!-- 
            <pagination
                v-if="total > 0"
                v-model:total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getTaskDetail"
            />-->
        </el-card>

        </div>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import {getInvoiceByNo,getInvoiceBill} from '@/api/sw/index'
  const route = useRoute();  
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const pros = defineProps(['title','openCheck','id','item']);
  const emit = defineEmits(['dialogClose', 'dialogSubmit','flushDetail'])

  const compReportVisible= ref(false)
  const total = ref(0)


  compReportVisible.value = pros.openCheck;
  const closeTxDialog =()=>{
      compReportVisible.value = false;
      emit('dialogClose',{tag:1});
 }

  
  
  const pageLoading = ref(true);

 
  /**
   * TODO
   * 查询角色信息字典
   * 回显label
   * 角色信息字典名称未知
  */
  const {invoice_status} =  toRefs<any>(proxy?.useDict("invoice_status"));
  const {iogistics_status} =  toRefs<any>(proxy?.useDict("iogistics_status"));

  const taskItem = ref({})
  const data = ref({})

  const queryParams = ref({
    pageNum:1,
    pageSize:10,
    id:null
  })

  taskItem.value = pros.item;
  
  
  //查询发票详情
  const getInvDetail = ()=>{
    getInvoiceByNo(taskItem.value.no).then(res=>{
        data.value = res.data;
    });

  }


  const opened = ()=>{
    // queryParams.pageNum = 1;
    // queryParams.pageSize = 10;
    // data.value = {};
    getInvDetail();
}
  

  
    onMounted(() => {
        setTimeout(() => {
            pageLoading.value = false
        }, 500);
    })

  
    watch(() => pros.openCheck, async val => {
            compReportVisible.value =  val;
        }
    );

    watch(() => pros.item, async val => {
            taskItem.value = val;
    }
);

  </script>
  
  <style scoped lang="scss">
  .page-container {
    height: calc(100vh - 189px);
    overflow-y: auto;
  
    .footer {
      background: #fff;
      text-align: center;
      z-index: 999;
      margin-top: 20px;
    }
  }
  </style>
  